<template>
  <div class="main">
    <div class="part">
      <div class="p-title">
        <div class="title">服务网点管理</div>
      </div>
      <div class="p-cont">
        <div class="opr">
          <div class="opr-left">
            <el-button type="primary">新建网点</el-button>
            <el-button plain>导出明细</el-button>
            <!-- <el-button link>
              <IconifyIconOnline
                icon="material-symbols:download"
                width="24px"
                height="24px"
              />下载导入模板</el-button
            > -->
          </div>
          <div class="opr-right">
            <el-input
              v-model="searchContent"
              placeholder="请输入关键词进行搜索"
            >
              <template #append>
                <el-button :icon="Search" />
              </template>
            </el-input>
          </div>
        </div>
        <div class="table-wrap">
          <el-table :data="tableData" style="width: 100%" stripe>
            <!-- <el-table-column type="selection" /> -->
            <el-table-column prop="name" label="名称" width="200" />
            <el-table-column prop="address" label="地址" width="400" />
            <el-table-column prop="person" label="负责人" width="200" />
            <el-table-column prop="phone" label="联系电话" width="200" />
            <el-table-column prop="status" label="状态" width="200" />
            <el-table-column prop="date" label="更新日期" width="200" />

            <el-table-column fixed="right" label="操作" width="200">
              <template #default>
                <el-button link type="primary" size="small">编辑</el-button>
                <!-- <el-button link type="primary" size="small">删除</el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="del-btn">
          <div class="del-left">
            <!-- <el-button type="primary">批量删除</el-button> -->
          </div>
          <div class="del-right">
            <div class="page-right">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="1000"
              />
            </div>
          </div>
        </div>
        <div class="page">
          <div class="page-left">共100条数据</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, onMounted, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
const searchContent = ref<string>("");
const tableData = ref([
  {
    name: "水映书香花园洋房服务点",
    address: "西洛乡金沙中路金沙中学北侧金沙县水映书香花园",
    person: "刘长兴",
    phone: "13499892833",
    status: "正常",
    date: "2022-12-12 12:12"
  },
  {
    name: "水映书香花园洋房服务点",
    address: "西洛乡金沙中路金沙中学北侧金沙县水映书香花园",
    person: "刘长兴",
    phone: "13499892833",
    status: "正常",
    date: "2022-12-12 12:12"
  },
  {
    name: "水映书香花园洋房服务点",
    address: "西洛乡金沙中路金沙中学北侧金沙县水映书香花园",
    person: "刘长兴",
    phone: "13499892833",
    status: "正常",
    date: "2022-12-12 12:12"
  },
  {
    name: "水映书香花园洋房服务点",
    address: "西洛乡金沙中路金沙中学北侧金沙县水映书香花园",
    person: "刘长兴",
    phone: "13499892833",
    status: "正常",
    date: "2022-12-12 12:12"
  },
  {
    name: "水映书香花园洋房服务点",
    address: "西洛乡金沙中路金沙中学北侧金沙县水映书香花园",
    person: "刘长兴",
    phone: "13499892833",
    status: "正常",
    date: "2022-12-12 12:12"
  },
  {
    name: "水映书香花园洋房服务点",
    address: "西洛乡金沙中路金沙中学北侧金沙县水映书香花园",
    person: "刘长兴",
    phone: "13499892833",
    status: "正常",
    date: "2022-12-12 12:12"
  },
  {
    name: "水映书香花园洋房服务点",
    address: "西洛乡金沙中路金沙中学北侧金沙县水映书香花园",
    person: "刘长兴",
    phone: "13499892833",
    status: "正常",
    date: "2022-12-12 12:12"
  },
  {
    name: "水映书香花园洋房服务点",
    address: "西洛乡金沙中路金沙中学北侧金沙县水映书香花园",
    person: "刘长兴",
    phone: "13499892833",
    status: "正常",
    date: "2022-12-12 12:12"
  },
  {
    name: "水映书香花园洋房服务点",
    address: "西洛乡金沙中路金沙中学北侧金沙县水映书香花园",
    person: "刘长兴",
    phone: "13499892833",
    status: "正常",
    date: "2022-12-12 12:12"
  }
]);
onBeforeMount(() => {});
onMounted(() => {});
</script>
<style scoped lang="scss">
::v-deep(.el-backtop) {
  display: none !important;
}

.opr {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .opr-right {
    width: 300px;
  }
}

.table-wrap {
  margin-top: 20px;
}

.del-btn {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .page-left {
    color: #bbb;
  }
}
</style>
